<template>
  <view class="main-right">
    <!-- 天气模块 -->
    <view class="card card-weather">
      <view class="title">🌤 实时天气</view>
      <view class="weather-info">
        <view>{{ weather.city }}</view>
        <view>{{ weather.temperature }}°C</view>
        <view>{{ weather.condition }}</view>
      </view>
    </view>

    <!-- 日历模块 -->
    <view class="card card-calendar">
      <view class="title">📅 今日日期</view>
      <view class="calendar">
        <view>{{ currentDate }}</view>
      </view>
    </view>

    <!-- 心情轮盘 -->
    <view class="card card-mood">
      <view class="title">🎡 今日签语</view>
      <view class="mood-text">{{ currentMood }}</view>
      <button @click="refreshMood">再抽一条</button>
    </view>

    <!-- 呼吸冥想引导 -->
    <view class="card card-breath">
      <view class="title">🧘 呼吸放松引导</view>
      <view class="circle" :class="{ expand: isBreathing }"></view>
      <view class="breath-tip">{{ isBreathing ? '吸气...' : '呼气...' }}</view>
    </view>
	<test/>
  </view>
</template>

<script>
import test from'@/component/test.vue'

export default {
	components: {
		test
	},
  data() {
    return {
      // 当前日期
      currentDate: '',
      
      // 当前天气
      weather: {
        city: '未知',
        temperature: '--',
        condition: '加载中...',
      },
      
      // 心情签语
      moods: [
        '🌈 一切都会变好的。',
        '💡 别怕慢，只怕停。',
        '☁️ 情绪有雨，也终将放晴。',
        '🫂 你值得被温柔以待。',
        '🌻 向阳而生，热爱生活。'
      ],
      currentMood: '',

      // 呼吸冥想引导状态
      isBreathing: true,
    };
  },
  mounted() {
    this.updateDate(); // 更新当前日期
    this.fetchWeather(); // 获取天气信息
    this.refreshMood(); // 获取随机签语
    this.startBreathing(); // 启动冥想呼吸引导
  },
  methods: {
    // 更新当前日期
    updateDate() {
      const today = new Date();
      const day = today.getDate();
      const month = today.getMonth() + 1;
      const year = today.getFullYear();
      this.currentDate = `${year}-${month}-${day}`;
    },
    
    // 获取天气信息（模拟）
    fetchWeather() {
      // 这里可以替换为真实的天气 API
      setTimeout(() => {
        this.weather = {
          city: '长沙',
          temperature: 24,
          condition: '晴天'
        };
      }, 1000);
    },

    // 随机获取心情签语
    refreshMood() {
      const i = Math.floor(Math.random() * this.moods.length);
      this.currentMood = this.moods[i];
    },

    // 启动冥想呼吸引导
    startBreathing() {
      setInterval(() => {
        this.isBreathing = !this.isBreathing;
      }, 5000); // 5秒切换一次
    }
  }
};
</script>

<style scoped>
.main-right{
	padding-left: 25px;
	background-color: #ebf0f6;
	width: 25%;
}

.card {
  background-color: white;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.title {
  font-weight: bold;
  margin-bottom: 10px;
}

.weather-info, .calendar, .mood-text, .breath-tip {
  font-size: 14px;
  text-align: center;
}

.circle {
  width: 60px;
  height: 60px;
  background: #91d5ff;
  border-radius: 50%;
  margin: 10px auto;
  transition: all 5s ease;
}

.expand {
  transform: scale(1.6);
}

button {
  display: block;
  margin-top: 10px;
  padding: 5px 10px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>
